<script type="text/javascript">
{literal}
    $(document).ready(function(){   
// reset age
        var year = parseInt($('input#birthday').val());
        if (year > 0 ) {
            var d = new Date();
            $('input#personAge').val(d.getFullYear() - year);
        }                

        // reset career code
        var careerCode = parseInt($('select#careerId').val());
        if (careerCode != 0) {
            $('#careerCode').val(careerCode);
        }

        $('select#provinceId').change( function() {
            provinceChange('provinceId', 'districtId', 'ward_name');        
        });

        $('input#personName').blur(function() {
            isNotEmpty($(this), _("Empty name"), 'statusMessage');
        });
        
        $('input#birthday').blur(function() {
            checkBirthday($(this),$('#DOB_mm'),$('#DOB_dd'));
        });
        $('input#DOB_mm').blur(function(){
            checkMonth($(this),false,'','statusMessage');
        });
        $('input#DOB_dd').blur(function(){
            checkDay($(this),false,'','statusMessage');
        });
        $('input#personAge').blur(function() {      
            checkAge($(this));
        });
        $('input#genderMale').blur(function() {
            checkSelectGender();
        });
        $('input#genderFemale').blur(function() {
            checkSelectGender();
        });
        
        $('input#personPhoneNumber').blur(function(){
            checkNumber($(this), _("Invalid phone number"), 'statusMessage', '#AAA');
        });
        
        $('input#patientRelativeNumber').blur(function(){
            checkNumber($(this), _("Invalid phone number"), 'statusMessage', '#AAA');
        });
        
        $("#personName").keydown(function(evt){
            autoCorrect('personName', evt);
        });
        
        $("#adrStreet").keydown(function(evt){
            autoCorrect('adrStreet', evt);
        });
        
        $("#patientRelativeName").keydown(function(evt){
            autoCorrect('patientRelativeName', evt);
        }); 

                    
        $('#careerId').change(function() {
            var code = parseInt($(this).val());
            if (code != 0) {
                $('#careerCode').val(code);
            }           
        });
        
        $('select#districtId').bind('change', function() { 
            $('#wardName').flushCache(); 
            $('#wardName').val('');        
            
        });
        $('select#provinceId').bind('change', function() {
            $('#wardName').flushCache();
            $('#wardName').val('');                    
        });                
        
        $('#code4AutoFill').autocomplete("../AutoSuggest/AreaAutoSuggestAjax?set_ajax_view" 
                ,
                {
                    width: 150,
                    multiple: false,
                    matchContains: true,   
                    minChars:0,
                    max: 10,             
                    autoFill:false,
                    extraParams: {
                        nationality: function() {
                            return $('select#nationality').val(); 
                            }
                    }
                }
        );
        
        $("#code4AutoFill").result(function(event, data, formatted) {
            if (data != null) {
                //fill auto fill field  
                //go get data for auto fill  
                $.ajax ({
                    type:    "POST",
                    url:      "../OdonReception/getAreaInfo?set_ajax_view",
                    data:     "wardId=" + data[1] ,
                    dataType: "json",
                    success:    function(data2) {
                       $('#provinceId').val(data2.area_info.province_id);                       
                       $('#wardName').val(data2.area_info.ward_name);
                       $('#patientRelativeName').focus();
                       
                       if(data2.district_option.length > 0){
                           $('#districtId').html(data2.district_option);
                           $('#districtId').val(data2.area_info.district_id);
                       }else{
                           var option = "<option value='0' label='- " + _('District') + " -'>- " + _('District') + " -</option>";
                           $('#districtId').html(option);
                       }
                       $('#wardName').flushCache();
                    }
                });                             
                               
            }
        }); 

        
        $('#wardName').autocomplete("../OdonReception/GetWardFromDistrictAjax?set_ajax_view" 
                    ,
                    {
                        width: 180,
                        multiple: true,
                        matchContains: true,  
                        minChars:0,  
                        max: 100,           
                        autoFill:false,                                      
                        extraParams: {
                        districtId: function() {
                            return $('select#districtId').val(); 
                            }
                        }
                    }
            );
            
            $("#wardName").result(function(event, data, formatted) {
                if (data != null) {
                    //fill auto fill field  
                    $(this).val(data[0]);                               
                                   
                } 
                
            });               
    });     
{/literal}
</script>   
    <div style="padding: 5px 0px;">
        <span id='statusMessage' class='formAlertMsg'></span>&nbsp;
    </div>
    
    <form id='addDemographicsForm' action=''>
        <input type="hidden" id="insurance" name="insurance" value="{$insurance}"></input>
    	<div id='patientDetailsInfo' style='border: 1px solid #BBB; padding: 0px 0px; -moz-box-shadow:0 0 3px #AAA; -webkit-box-shadow:0 0 3px #AAA;'>
    		<div class='field-row add-patient-row'>
    			<div class='field-label add-patient-label' style='width: 120px;'>{translate}Patient's ID{/translate} *</div>
    			<div class='field-value add-patient-value' style='width: 250px;'>
                    <!-- 
    				<input id='patientCodePreFix' maxlength="2"  name='patient[codePrefix]' type="text" value='{$defaultcodePrefix}' style='width: 30px;' onkeyup="return moveNext(event, 'patientCode')"/>&nbsp;
                    <input id='patientCode' maxlength="6" name='patient[patient_code]' type="text" value="{$patient->getPatientCode()}" style='width: 100px;'/>&nbsp;
                     -->
    				<input id='patientId' name='patient[id]' type='hidden' value='{$person->getId()}' />
                    <span id="patientCode" style="font-size: 1.5em; font-weight: bold;">{$patient->getPatientCode()}</span>
    			</div>                             
    			<div style='clear: both;'></div>
    		</div>
    		<div class='field-row add-patient-row'>
    			<div class='field-label add-patient-label' style='width: 120px;'>{translate}Full name{/translate} *</div>
    			<div class='field-value add-patient-value' style='width: 250px;'>
    				<input id='personName' name='person[name]' type='text' value='{$person->getName()}' style='width: 230px;' onkeyup="return moveNextBlur(event, 'personName', 'genderMale')"/>&nbsp;
    			</div>
    			<div class='field-label add-patient-label' style='width: 100px;'>{translate}Gender{/translate} *</div>
    			<div class='field-value add-patient-value' style='width: 150px;'>
    				 <input id='genderMale' type='radio' name='person[gender]' value='male' {if $person->getGender() == 'male'}checked='checked'{/if} onkeyup="return moveNextBlur(event, 'genderMale', 'genderFemale')"/><span class='label'>{translate}Male{/translate}</span>&nbsp;&nbsp;
    	             <input id='genderFemale' type='radio' name='person[gender]' value='female' {if $person->getGender() == 'female'}checked='checked'{/if} onkeyup="return moveNextBlur(event, 'genderFemale', 'nationality')"/><span class='label'>{translate}Female{/translate}</span>
    			</div>
    			<div class='field-label add-patient-label' style='width: 100px;'>{translate}Nationality{/translate}</div>
    			<div class='field-value add-patient-value' style='width: 170px;'>
    				<select name='person[nationality]' id='nationality' style='width: 165px;' onkeyup="return moveNext(event, 'DOB_{$datePart_0}')">
    					{html_options options=$countryList selected=$selectedNationality}
    				</select>&nbsp;
    	        </div>
    			<div style='clear: both;'></div>
    		</div>
    		<div class='field-row add-patient-row'>
    			<div class='field-label add-patient-label' style='width: 120px;'>{translate}Date of birth/Age{/translate} *</div>
    			<div class='field-value add-patient-value' style='width: 250px;'>
    				<input name='person[DOB_{$datePart_0}]' maxlength='2' id='DOB_{$datePart_0}' onkeyup="return moveNextBlur(event, 'DOB_{$datePart_0}', 'DOB_{$datePart_1}')" type='text' value='{$birthDays.0}' style='width: 25px;' onkeyup="return autoTab(this, 2, 'DOB_{$datePart_1}')">
               		<input name='person[DOB_{$datePart_1}]' maxlength='2' id='DOB_{$datePart_1}' onkeyup="return moveNextBlur(event, 'DOB_{$datePart_1}', 'birthday')" type='text' value='{$birthDays.1}' style='width: 25px;' onkeyup="return autoTab(this, 2, 'birthday')">
               		<input name='person[DOB_{$datePart_2}]' maxlength='4' id='birthday' onkeyup="return moveNextBlur(event, 'birthday', 'personAge')" type='text' value='{$birthDays.2}' style='width: 40px;' onkeyup="return autoTab(this, 4, 'personAge')">&nbsp;-
               		<input name='person[age]' id='personAge' maxlength='3' onkeyup="return moveNextBlur(event, 'personAge', 'personPhoneNumber')" type='text' value='' style='width: 25px;'/>
                  	<span class='label' style='color: #AAA; font-weight: normal'>({$datePart_0}-{$datePart_1}-{$datePart_2})</span>
    			</div>
    			<div class='field-label add-patient-label' style='width: 100px;'>{translate}Phone number_1{/translate}</div>
    			<div class='field-value add-patient-value' style='width: 150px;'>
    				<input name='person[phoneNumber]' id='personPhoneNumber' onkeyup="return moveNext(event, 'careerCode')" type='text' value='{$person->getPhoneNumber()}' style='width: 140px;'/>&nbsp;
    			</div>
    			<div class='field-label add-patient-label' style='width: 100px;'>{translate}Career{/translate}</div>
    			<div class='field-value add-patient-value' style='width: 170px;'>
    				<input id='careerCode' type='text' value='' maxlength="2" style='width: 20px;' onkeyup="javascript:suggestCareer(event, 'careerId')"/>
    				<select name='person[careerId]' id='careerId' onkeyup="return moveNext(event, 'adrStreet')" style='width: 135px;'>
    					<option value='0' selected='selected'>- - -</option>
    					{html_options options=$careerList selected=$person->getCareer()}
    				</select>&nbsp;
    			</div>
    			<div style='clear: both;'></div>
    		</div>
    		<div class='field-row add-patient-row'>
    			<div class='field-label add-patient-label' style='width: 120px;'>{translate}Address{/translate}</div>
    			<div class='field-value add-patient-value'>
    				<input name='address[street]' id='adrStreet' onkeyup="return moveNext(event, 'code4AutoFill')" type='text' value='{$person->getStreet()}' style='width: 230px;'/>
    				<input name='code4AutoFill' id='code4AutoFill' onkeyup="return moveNext(event, 'provinceId')" type='text' value='' style='width: 70px;'/>&nbsp;
    			</div>
    			<div style='clear: both;'></div>
    		</div>
    		<div class='field-row add-patient-row'>
    			<div class='field-label add-patient-label' style='width: 120px;'>{translate}Province{/translate}</div>
    			<div class='field-value add-patient-value' style='width: 247px;'>				
    				<select name='address[provinceId]' id='provinceId' onkeyup="return moveNext(event, 'districtId')" style='width: 150px;'>
    				    <option value='0' label='- - -'>- {translate}Province{/translate} -</option>
    					{html_options options=$provinceList selected=$selectedProvince}
    				</select>&nbsp;
    			</div>
    			<div class='field-label add-patient-label' style='width: 100px;'>{translate}District{/translate}</div>
    			<div class='field-value add-patient-value' style='width: 160px;'>
    				<select name='address[districtId]' id='districtId' onkeyup="return moveNext(event, 'wardName')" style='width: 150px;'>
    				    <option value='0' label='- - -'>- {translate}District{/translate} -</option>
                        {html_options options=$districtList selected=$selectedDistrict}
    	            </select>&nbsp;
    			</div>
    			<div class='field-label add-patient-label' style='width: 100px;'>{translate}Ward{/translate}</div>
    			<div class='field-value add-patient-value' style='width: 173px;'>
    				<input name='address[wardName]' id='wardName' onkeyup="return moveNext(event, 'patientRelativeName')" type='text' value='{$person->getWardName()}' style='width: 163px;'/>&nbsp;
    	        </div>
    			<div style='clear: both;'></div>
    		</div>
    	
    		<div class='field-row add-patient-row' style='border-bottom: none;'>
    			<div class='field-label add-patient-label' style='width: 120px;'>{translate}Relative name{/translate}</div>
    			<div class='field-value add-patient-value' style='width: 250px;'>
    				<input id='patientRelativeName' name='patient[relativeName]' onkeyup="return moveNext(event, 'patientRelativeNumber')" type='text' value='{$patient->getRelativeName()}' style='width: 230px;'/>&nbsp;
    			</div>
    			<div class='field-label add-patient-label' style='width: 100px;'>{translate}Phone number{/translate}</div>
    			<div class='field-value add-patient-value'>
    				<input id='patientRelativeNumber' name='patient[relativeNumber]' type='text' onkeyup="return moveNext(event, 'insuranceCode_0')" value='{$patient->getRelativeNumber()}' style='width: 140px;'/>&nbsp;
    			</div>
    			<div style='clear: both;'></div>
    		</div>
    	</div>
    </form>
    <div style="display: none;">
        {foreach from=$careerAutoSuggestList item=item}
         <input type="hidden" id='career{$item.auto_suggest_code*1}' value="{$item.career_id}">    
        {/foreach}
    </div>
